<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    class="ccui-form"
    label-width="130px"
  >
    <detailBaseColInfo :colList="jsList.baseFormList" :colDetail="form" />

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="合同正式编码：" prop="formalContractCode">
          <el-input
            :disabled="form.flag === '1'"
            v-model="form.formalContractCode"
            placeholder="请输入合同正式编码"
            maxlength="200"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="生效日期：" prop="enabledDate">
          <el-date-picker
            v-model="form.enabledDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <detailBaseColInfo :colList="jsFormList1" :colDetail="form" />
  </el-form>
</template>

<script>
import jsList from "../js";
import publicComponent from "@/basa/components/public";
import { cloneDeep } from "lodash";
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    detailBaseColInfo: publicComponent.detailBaseColInfo
  },
  data() {
    return {
      jsList,
      form: {
        enabledDate: "", // 生效日期
        formalContractCode: "" // 合同正式编码
      },
      rules: {
        enabledDate: [
          {
            type: "string",
            required: true,
            message: "请选择生效日期",
            trigger: "change"
          }
        ],
        formalContractCode: [
          { required: true, message: "请输入合同正式编码", trigger: "blur" }
        ]
      },
      jsFormList: [],
      jsFormList1: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.setDate(this.detail);
      const jsFormList1 = cloneDeep(jsList.baseFormList1);
      // 币种判断
      if (this.detail.smpPcConc.currencyName === "人民币") {
        const i = jsFormList1.findIndex(
          _ => _.titleContent === "chExchangeRate"
        );
        jsFormList1.splice(i, 1);
        const j = jsFormList1.findIndex(
          _ => _.titleContent === "exchangeRateRefDate"
        );
        jsFormList1.splice(j, 1);
      }
      // 兑美元美元汇率
      if (
        this.detail.smpPcConc.isOverseas !== "否" &&
        !["人民币", "美元"].includes(this.detail.smpPcConc.currencyName)
      ) {
        const i = jsFormList1.findIndex(_ => _.titleContent === "compileUser");
        jsFormList1.splice(i, 0, {
          label: "兑美元汇率",
          titleContent: "usExchangeRate"
        });
      }
      // 多税率判断
      if (this.detail.smpPcConc.multiRateCode === "是") {
        const i = jsFormList1.findIndex(
          _ => _.titleContent === "taxRatePercent"
        );
        jsFormList1.splice(i, 1);
      }
      // 是否浮动合同价格判断
      if (this.detail.smpPcConc.isFloatContractPrice === "否") {
        const i = jsFormList1.findIndex(_ => _.titleContent === "floatDesc");
        jsFormList1.splice(i, 1);
      }
      this.jsFormList1 = jsFormList1;

      this.form = {
        ...this.form,
        ...this.detail.smpPcConc,
        flag: this.detail.flag,
        contractPerson: this.detail.smpPcConc.contractPerson,
        materialSource: this.detail.smpPcConc.materialSource,
        contractPersonTel: this.detail.smpPcConc.contractPersonTel
      };
    },
    setDate(item) {
      // 循环数组
      if (Array.isArray(item)) {
        item.map(Item => {
          this.setDate(Item);
        });
      } else {
        // 循环对象
        for (var key in item) {
          if (item[key]) {
            if (key.indexOf("Date") != -1) {
              item[key] = item[key].split(" ")[0];
            }
            // 判断类型为 对象类型 循环
            if (item[key] instanceof Object) {
              this.setDate(item[key]);
            }
          }
        }
      }
    },

    // 提交表单验证
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs["form"].validate(valid => {
          if (valid) resolve(this.form);
          reject("first");
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input {
  width: 260px;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
</style>
